<template>
  <el-dialog
    :title="modalData.id ? $t('firm.editUser') : $t('firm.addUser')"
    :visible="visible"
 
    width="400px"
    @close="onClose"
    @open="onOpen"
  >
    <el-form
      :ref="refName"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item :label="$t('firm.phone')" prop="telPhone">
        <el-input
          v-model="ruleForm.telPhone"
          :disabled="!!modalData.id"
          :placeholder="$t('firm.inputPhone')"
        />
      </el-form-item>
      <el-form-item :label="$t('firm.name')" prop="userName">
        <el-input v-model="ruleForm.userName" :placeholder="$t('firm.inputName')" />
      </el-form-item>

      <el-form-item :label="$t('firm.role')" prop="roleCode">
        <!-- <el-select v-model="ruleForm.roleCode" placeholder="请选择用户类型">
          <el-option
            v-for="roleItem in roleList"
            :key="roleItem.code"
            :label="roleItem.roleAlias"
            :title="roleItem.remark"
            :value="roleItem.code"
          />
        </el-select> -->
        <el-input disabled :value="$t('firm.commonUser')" />
      </el-form-item>
      <!-- <el-form-item label="所属公司" prop="companyCode">
        <el-select v-model="ruleForm.companyCode" placeholder="请选择公司">
          <el-option
            v-for="compItem in companyList"
            :key="compItem.code"
            :label="compItem.companyName"
            :title="compItem.remark"
            :value="compItem.code"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item :label="$t('firm.position')" prop="positionName">
        <el-input v-model="ruleForm.positionName" :placeholder="$t('firm.inputPosition')" />
      </el-form-item>

      <el-form-item :label="$t('firm.explain')" prop="remark">
        <el-input v-model="ruleForm.remark" :placeholder="$t('firm.inputExplain')" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('onClose')">{{ $t('btns.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="submitForm">
        {{ $t('btns.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { validateRegExp } from '@/utils/validate'

const validatePhone = (rule, value, callback) => {
  if (value) {
    if (!validateRegExp('phoneNumber', value)) {
      callback(new Error(this.$t('firm.inputRightP')))
      return
    }
  }
  callback()
}

export default {
  props: {
    visible: {
      default: false,
      type: Boolean
    }
  },

  data() {
    return {
      refName: 'ruleForm',
      ruleForm: {},
      rules: {
        userName: [
          { required: true, message: this.$t('firm.inputName'), trigger: 'blur' },
          { max: 20, message: this.$t('firm.twenty'), trigger: 'blur' }
        ],
        telPhone: [
          { required: true, message: this.$t('firm.inputPhone'), trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ]
        // roleCode: [
        //   { required: true, message: '请选择用户类型', trigger: 'blur' }
        // ],
        // companyCode: [
        //   { required: true, message: '请选择公司', trigger: 'blur' }
        // ]
      }
    }
  },
  computed: {
    ...mapState('common', ['companyList', 'roleList']),
    ...mapGetters(['modalKey', 'modalData', 'loading'])
  },

  // mounted() {
  //   setTimeout(() => {
  //     this.$store.dispatch('common/getRoleList')
  //     this.$store.dispatch('common/getCompanyList')
  //   }, 1000)
  // },

  methods: {
    submitForm(ruleForm) {
      this.$refs[this.refName].validate(valid => {
        if (!valid) {
          return
        }
        this.$store.dispatch('firmMg/onEditUser', this.ruleForm)
      })
    },
    onClose() {
      this.$emit('onClose')
      this.ruleForm = {}
      this.$refs[this.refName].resetFields()
    },
    onOpen() {
      this.ruleForm = Object.assign({}, this.modalData)
    }
  }
}
</script>
